import Vue from "vue"
import App from "./App.vue"
import router from "./router/index"
import store from "@/store"
import TypeNav from "@/components/Typenav"
import Pagination from "@/components/Pagination"
import Dialog from "./components/Dialog"
// 引入mock文件,开启mock服务器
import "@/mock/mockServe"
// <!-- 引入swiper插件中的css样式,因为页面中有几个地方用到swiper插件,所以统一引入在入口文件中 -->
import "swiper/css/swiper.min.css"

// 引入图片懒加载插件
import VueLazyload from "vue-lazyload"

import load from "@/assets/aa.gif"
// 注册插件
Vue.use(VueLazyload, {
  // loading: 'dist/loading.gif',
  loading: load,
})
// 这里有一个问题,由于插件版本问题,会出现编译失败的情况,需要指定大版本为1,这样可解决编译失败的问题,!!!!! 一定注意看官网,使用插件时,一定看官网说明
// 最后一步,到需要使用的地方修改图片

Vue.config.productionTip = false

Vue.component(TypeNav.name, TypeNav)
// 注册全局组件,任何地方都能直接使用
Vue.component(Pagination.name, Pagination)
// Vue.component===>这个方法是注册全局组件--->一次只能注册一个
// 在组件实例中,写components是注册局部组件--->可一次注册多个

Vue.component(Dialog.name, Dialog)
new Vue({
  render: h => h(App),
  //  router关联vue
  router,
  // 关联Vuex状态管理工具
  store,

  beforeCreate() {
    // 在主入口文件中注册全局事件总线,
    // 需要在生命周期钩子函数中的beforecreate中注册.在这个钩子中，是在数据监测，数据代理之前创建，此时无法通过Vue实例访问到data中的数据，methods中的方法，模板还没解析。
    // 相当于给vue原型上添加一个方法$bus,这个方法指向vue实例本身,这样就可以在其他任何组件实例中访问到,可以通过$bus进行组件通信
    Vue.prototype.$bus = this
  },
}).$mount("#app")
